<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <!-- 路由视图容器 -->
  <div class="router-view-container">
    <RouterView />
  </div>
</template>

<style scoped>
/* 确保路由视图容器占满整个视口高度 */
:root {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh; /* 保证 body 最小高度为视口高度 */
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  height: 100%;  /* 保证根组件高度为视口高度 */
}

/* 路由视图容器样式 */
.router-view-container {
  flex: 1;                /* 让容器占满剩余空间 */
  width: 100%;            /* 宽度占满整个容器 */
  height: 100%;           /* 高度占满整个视口 */
}

/* 路由过渡动画 */
.router-fade-enter-active,
.router-fade-leave-active {
  transition: opacity 0.3s ease;
}

.router-fade-enter-from,
.router-fade-leave-to {
  opacity: 0;
}
</style>
